<template>
  <div>
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :columns="columns"
      :params="fetchParams"
      :datakey="'rows'"
      :height="600"
      :isSelectColumn="false"
      :isColumnFilter="false"
      :isToperInfo="false"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>

    <!-- 详情 -->
    <BaseDialog :visible.sync="questionnaire" :title="this.title" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <AlarmDetails :details="details" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { getRtmAlarmDeatil } from '@/api/customerRepair/rtmalarm/rtmalarminfo';
import AlarmDetails from '@/pages/customerRepair/RTMalarm/RTMalarmprocessing/rtmalarmdetails.vue'; // 编辑RTM报警处理

export default {
  // 组件注册
  components: {
    AlarmDetails
  },
  mixins: [dictionary],
  props: {
    rtmTrafficCode: String
  },
  data() {
    this.BaseTable = null;
    this.title = '';
    return {
      fetchApi: getRtmAlarmDeatil,
      fetchParams: { xhrAbort: false, rtmTrafficCode: this.rtmTrafficCode },
      columns: this.createTableColumns(),
      questionnaire: false,
      details: null
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    showDetail(val) {
      this.details = val;
      this.questionnaire = true;
      this.title = '查询详情';
    },
    closeHandler() {
      this.questionnaire = false;
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.showDetail(props.row)}>
                  详情
                </el-button>
              </div>
            );
          }
        },
        {
          title: '报警处理单号',
          dataIndex: 'RTM_TRAFFIC_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '报警编号',
          dataIndex: 'ALERT_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '任务接收时间',
          dataIndex: 'TASK_RECEIVE_TIME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '任务委托书号',
          dataIndex: 'VWTSBH',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '委托书开具时间',
          dataIndex: 'VWTSBH_TIME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '拒绝原因',
          dataIndex: 'REFUSE_REASON',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '结算状态',
          dataIndex: 'V_SETTLEMENT_STATUS',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '结算时间',
          dataIndex: 'D_SETTLEMENT_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '报警类型',
          dataIndex: 'ALERT_TYPE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '报警级别',
          dataIndex: 'ALERT_LEVEL',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '报警时间',
          dataIndex: 'ALERT_TTME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '行驶里程',
          dataIndex: 'CAR_MILEAGE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>
